<template>
  <router-view />
  <nut-tabbar bottom safe-area-inset-bottom placeholder>
    <nut-tabbar-item
      v-for="(item, index) in tabBar.list"
      :tab-title="item.title"
      :icon="item.icon"
      :key="index"
      :to="item.to"
      @tab-switch="switchTab(index)"
      v-model="tabBar.active"
    >
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup>
import { h, reactive } from "vue";
import { Home, Category, Cart, My } from "@nutui/icons-vue";

// 底部导航栏
const tabBar = reactive({
  avtive: 0,
  list: [
    {
      name: "index",
      title: "首页",
      icon: h(Home),
      to: "/",
    },
    {
      name: "category",
      title: "分类",
      icon: h(Category),
      to: "/category",
    },
    {
      name: "cart",
      title: "购物车",
      icon: h(Cart),
      to: "/cart",
    },
    {
      name: "mine",
      title: "我的",
      icon: h(My),
      to: "/mine",
    },
  ],
});

const switchTab = (index) => {
  tabBar.active = index;
}
</script>
  